<!--
 * @Descripttion: 资金管理
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-08-05 14:18:34
 * @LastEditors: GW
 * @LastEditTime: 2022-06-08 17:21:11
-->

<template>
    <div class="content-wrapper a-base-container">
        <div class="call-system-wrapper">
            <div style="margin:10px;" class="call-system-out">
                <div class="call-system-title font-style">
                    <span>可用余额： </span>
                    </h5>
                </div>
                <div class="call-system-mony">
                    <a-statistic class="font-style" :value-style="{ color: '#1890ff' }" :precision="2" :value="accountData.balance?accountData.balance:0" />
                    <a-button class="call-system-bon" type="primary" ghost size="small" @click="onModalOpen(1)">充值</a-button>
                </div>

            </div>
            <!-- 页签  -->
            <a-tabs v-model="activeKey" @change="callback" class="tab-class">
                <a-tab-pane key="balanceChangeRecord" tab="收支明细">
                    <income-detail></income-detail>
                </a-tab-pane>
            </a-tabs>
            <!--充值弹窗-->
            <drag-modal class="research-drag-wrapper" v-model="operationModal" title="账户充值" @cancel="cancel" width="400px">
                <a-descriptions :title="false" :column="1">
                    <a-descriptions-item label="账户余额">
                        <span style="font-weight:bold">{{accountData.balance}}</span>元
                    </a-descriptions-item>
                    <a-descriptions-item label="充值金额">
                        <a-input size="small" v-model="postData.amount" oninput="value=value.toString().match(/^\d+(?:\.\d{0,2})?/)" maxLength="10" style="width:200px">
                            <a-select slot="addonAfter" default-value="1" v-model="payMethod" style="width: 130px">
                                <a-select-option :value="1" style="olor:#1578FF">
                                    <a-icon type="alipay-circle" style="color:#1578FF" /> 支付宝支付
                                </a-select-option>
                                <a-select-option :value="2" style="color:#42B035">
                                    <a-icon type="wechat" style="color:#42B035" /> 微信支付
                                </a-select-option>
                            </a-select>
                        </a-input>
                    </a-descriptions-item>
                    <!-- <a-descriptions-item label="我已了解">
                        <a-checkbox v-model="agreeCheck">
                            <span style="color:red">充值金额，仅限外呼功能模块消费</span>
                        </a-checkbox>
                    </a-descriptions-item> -->
                </a-descriptions>
                <template slot="footer">
                    <a-button type="primary" @click="createPayOrder">确认充值</a-button>
                    <a-button @click="cancel" class="margin-left-10">取消</a-button>
                </template>
            </drag-modal>
            <!-- 微信支付 -->
            <a-modal v-model="wxPayVisible" title="微信支付" centered on-ok="handleok" width="800px">
                <div>
                    <!-- <span>应付金额2599.00元</span>  -->
                </div>
                <div style="margin-top: 20px;">
                    <img style="margin-left: 40px; height: 250px; width: 250px" :src="payCodeImg" />
                    <img style="margin-left: 40px; height: 300px;" src="@/assets/image/pc_icon_phone-bg.png" />
                </div>
                <template slot="footer">
                    <a-button key="back" @click="() => (wxPayVisible = false)">取消</a-button>
                </template>
            </a-modal>
        </div>
    </div>
</template>

<script>
import { getByCompany } from "@/api/expenses/expensesAccount";
import { createPayOrder } from "@/api/expenses/paymentOrder";
import { getAliPayUrlFromPayment, getWeXinPayImageFromPayOrder } from "@/api/member/order";
// import incomeDetail from "@/views/call/incomeDetail.vue";

import { mapState } from 'vuex';

export default {
    components: {
        IncomeDetail: () => import("@/views/call/incomeDetail.vue"),
    },
    data () {
        return {
            accountData: {},
            operationModal: false,//新增修改弹窗
            postData: {
            },
            agreeCheck: true,
            payMethod: 1,            //支付方式
            wxPayVisible: false,        //是否打开微信支付码
            activeKey: "balanceChangeRecord",
        };
    },
    computed: {
        ...mapState({
            menusMap: state => state.user.menusMap,
            menus: state => state.user.menus,
        })
    },
    watch: {

    },
    activated () {
        this.getAccount();
    },
    methods: {
        //获取账户余额
        getAccount () {
            getByCompany().then(response => {
                if (response.code === 200) {
                    this.accountData = response.data;
                    console.log("获取账户余额", this.accountData);
                }
            });
        },
        cancel () {
            this.operationModal = false;
        },
        onModalOpen () {
            this.operationModal = true;
        },
        //创建支付订单
        createPayOrder () {
            let { postData } = this;
            if (!postData.amount || this.amount == 0) {
                this.$message.warning('请输入金额');
                return;
            }
            // if (!this.agreeCheck) {
            //     this.$message.warn("请同意支付条款");
            //     return;
            // }
            if (!this.payMethod) {
                this.$message.warn("请选择支付方式");
                return;
            }
            createPayOrder(postData).then(response => {
                if (response.code == 200) {
                    let { id, orderNo } = response.data;
                    if (this.payMethod == 1) { //支付宝支付
                        getAliPayUrlFromPayment({
                            orderId: id,           //支付订单ID
                        }).then(response => {
                            this.gotoPayUrl(response);
                        });
                    } else { //微信支付
                        getWeXinPayImageFromPayOrder({
                            orderId: id
                        }).then(response => {
                            console.log(response);
                            this.payCodeImg = response.data;
                            this.wxPayVisible = true;
                            let wxPayInterval = window.setInterval(() => {
                                setTimeout(this.wxPayResult(wxPayInterval, orderId), 0);
                            }, 5000)
                        });
                    }
                }
            });
        },
        gotoPayUrl (response) {
            var win = window.open("", "支付");
            win.document.open();
            win.document.write(response);
            win.document.close();
            this.wxPayVisible = false;
            this.operationModal = false;
        },
        //微信支付结果
        wxPayResult (wxPayInterval, orderId) {
            console.log("==============请求成功==============");
            getOrderDetail({ orderId: orderId }).then(res => {
                if (res.code == 200) {
                    if (res.data.orderStatus == 1) {
                        this.$message.success("支付成功");
                        this.wxPayVisible = false;
                        this.operationModal = false;
                        this.$router.push("/views/call/moneyManage");
                        clearInterval(wxPayInterval);
                    }
                } else {
                    clearInterval(wxPayInterval);
                }
            });
        },
    },
};

</script>
<style lang="less">
    @import '~@/style/call.less';
</style>
<style lang="less" scoped>
    .tab-class {
        margin: 0 20px;
    }

    .call-system-out {
        border: 1px solid #cccccc;
        width: 97.5%;
        margin-left: 20px !important ;
        height: 120px !important;
        min-height: 120px;
        padding: 0 0 0 20px;
        box-sizing: border-box;

        .call-system-title {
            padding: 20px 0;
            box-sizing: border-box;
        }

        .call-system-mony {
            display: flex;
        }

        .call-system-bon {
            margin-left: 60px;
            margin-top: 5px;
        }
    }

    .font-style {
        font-weight: bolder;
    }
</style>

